<template>
  <div id="report-page">
    <el-card>
    <!-- 上半部分 -->
    <div class="upper-section">
      <!-- 左侧饼图区域 -->
      <div class="left-chart-container">
        <div ref="pieChart" :style="{ width: '100%', height: '400px' }"></div>
      </div>

      <!-- 右侧折线图区域 -->
      <div class="right-chart-container">
        <div ref="lineChart" :style="{ width: '100%', height: '400px' }"></div>
      </div>
    </div>

    <div class="upper-section">
      <!-- 左侧饼图区域 -->
      <div class="left-chart-container">
        <div ref="chartDom" :style="{ width: '1200px', height: '500px' }"  v-show="false"></div>
      </div>

      <!-- 右侧折线图区域 -->
      <!-- <div class="right-chart-container">
        <div ref="lineChart2" :style="{ width: '100%', height: '400px' }"></div>
      </div> -->
    </div>
  </el-card>

    <!-- 下半部分表格区域 -->
    <el-card>
      <div class="lower-section">
        <el-table :data="monthsData" style="width: 100%" stripe >
          <el-table-column prop="month" label="月份"></el-table-column>
          <el-table-column prop="部门A" label="部门A"></el-table-column>
          <el-table-column prop="部门B" label="部门B"></el-table-column>
          <el-table-column prop="部门C" label="部门C"></el-table-column>
          <el-table-column prop="部门D" label="部门D"></el-table-column>
          <el-table-column prop="部门E" label="部门E"></el-table-column>
        </el-table>
        <!-- <el-table :data="monthsData" border>
            <el-table-column
                label="年"
                prop="months">
                </el-table-column>
                           
                    <el-table-column v-for="(item,index) in departments" :key="item" :label="item">
                        <template slot-scope="scope">
                            <span>{{scope.row.sales[index]}}</span>
                        </template>	
                    </el-table-column>

            </el-table> -->
      </div>
    </el-card>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";
import { ElTable, ElTableColumn } from "element-plus"; // 引入Element UI的Table组件

export default {
  components: { ElTable, ElTableColumn }, // 注册组件
  data() {
    return {
      months: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      departments: ["部门A", "部门B", "部门C", "部门D", "部门E"],
      monthsData: [
        // 假设这是从服务器获取的真实数据
        {
          month: "1月",
          部门A: Math.random() * 10000,
          部门B: Math.random() * 10000,
          部门C: Math.random() * 10000,
          部门D: Math.random() * 10000,
          部门E: Math.random() * 10000,
        },
        {
          month: "2月",
          部门A: Math.random() * 10000,
          部门B: Math.random() * 10000,
          部门C: Math.random() * 10000,
          部门D: Math.random() * 10000,
          部门E: Math.random() * 10000,
        },
        {
          month: "3月",
          部门A: Math.random() * 10000,
          部门B: Math.random() * 10000,
          部门C: Math.random() * 10000,
          部门D: Math.random() * 10000,
          部门E: Math.random() * 10000,
        },
        {
          month: "4月",
          部门A: Math.random() * 10000,
          部门B: Math.random() * 10000,
          部门C: Math.random() * 10000,
          部门D: Math.random() * 10000,
          部门E: Math.random() * 10000,
        },
        {
          month: "5月",
          部门A: Math.random() * 10000,
          部门B: Math.random() * 10000,
          部门C: Math.random() * 10000,
          部门D: Math.random() * 10000,
          部门E: Math.random() * 10000,
        },
        {
          month: "6月",
          部门A: Math.random() * 10000,
          部门B: Math.random() * 10000,
          部门C: Math.random() * 10000,
          部门D: Math.random() * 10000,
          部门E: Math.random() * 10000,
        },
        {
          month: "7月",
          部门A: Math.random() * 10000,
          部门B: Math.random() * 10000,
          部门C: Math.random() * 10000,
          部门D: Math.random() * 10000,
          部门E: Math.random() * 10000,
        },
        {
          month: "8月",
          部门A: Math.random() * 10000,
          部门B: Math.random() * 10000,
          部门C: Math.random() * 10000,
          部门D: Math.random() * 10000,
          部门E: Math.random() * 10000,
        },
        {
          month: "9月",
          部门A: Math.random() * 10000,
          部门B: Math.random() * 10000,
          部门C: Math.random() * 10000,
          部门D: Math.random() * 10000,
          部门E: Math.random() * 10000,
        },
        {
          month: "10月",
          部门A: Math.random() * 10000,
          部门B: Math.random() * 10000,
          部门C: Math.random() * 10000,
          部门D: Math.random() * 10000,
          部门E: Math.random() * 10000,
        },
        {
          month: "11月",
          部门A: Math.random() * 10000,
          部门B: Math.random() * 10000,
          部门C: Math.random() * 10000,
          部门D: Math.random() * 10000,
          部门E: Math.random() * 10000,
        },
        {
          month: "12月",
          部门A: Math.random() * 10000,
          部门B: Math.random() * 10000,
          部门C: Math.random() * 10000,
          部门D: Math.random() * 10000,
          部门E: Math.random() * 10000,
        },
      ],
      // monthsData: [
      //   // 假设这是从服务器获取的真实数据
      //   { month: '1月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '2月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '3月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '4月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '5月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '6月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '7月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '8月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '9月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '10月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '11月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },
      //   { month: '12月', sales: [{ "部门A": Math.random() * 10000}, {"部门B": Math.random() * 10000}, {"部门C": Math.random() * 10000}, {"部门D": Math.random() * 10000}, {"部门E": Math.random() * 10000 }] },

      // ],

      pieOption: null,
      lineOption: null,
      picture3Option: null,
    };
  },
  mounted() {
    this.initPieChart();
    this.initLineChart();
    this.initPicture3();
  },
  methods: {
    initPieChart() {
      let arr = [];
      this.departments.forEach((depart) => {
        let obj = {};
        let arrData = this.monthsData.map((item) => item[depart]);
        obj["data"] = arrData;
        obj["name"] = depart;
        obj["type"] = "line";
        arr.push(obj);

        console.log("arrData", arrData);
      });

      const pieChart = echarts.init(this.$refs.pieChart);

      this.pieOption = {
        title: {
          text: "测试饼图",
          subtext: "部门年度销售额统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        // 配置饼图选项，此处仅示例，实际数据需要替换为计算后的每月各部门销售额总和
        series: [
          {
            name: "测试饼图",
            type: "pie",
            radius: "50%",
            data: [
              // 填充模拟数据
              { name: "部门A", value: Math.random() * 100000 },
              { name: "部门B", value: Math.random() * 100000 },
              { name: "部门C", value: Math.random() * 100000 },
              { name: "部门D", value: Math.random() * 100000 },
              { name: "部门E", value: Math.random() * 100000 },
            ],
          },
        ],
      };
      pieChart.setOption(this.pieOption);
    },
    initLineChart() {
      let arr = [];
      console.log(this.monthsData);
      this.departments.forEach((depart) => {
        let obj = {};
        let emphasis = {};
        let barWidth = {};
        let arrData = this.monthsData.map((item) => item[depart]);
        obj["data"] = arrData;
        obj["name"] = depart;
        obj["type"] = "line";
        obj["barWidth"] = "300";
        // emphasis["barWidth"] = "10%";
        // obj["emphasis"] = emphasis;
        //     itemStyle: {
        //   emphasis: {
        //     barWidth: 60 // 设置柱状图柱子在 hover 状态下的宽度为 60 像素
        //   }
        // }

        arr.push(obj);

        console.log("arrData", arrData);
      });
      console.log(arr);
      const lineChart = echarts.init(this.$refs.lineChart);
      this.lineOption = {
        title: {
          text: "测试堆叠折线图",
        },
        tooltip: {
          tigger: "axis",
        },
        legend: {
          data: ["部门A", "部门B", "部门C", "部门D", "部门E"],
        },
        xAxis: {
          type: "category",
          data: this.months,
        },
        yAxis: {
          type: "value",
          name: "销售额",
        },
        series: arr,
      };
      lineChart.setOption(this.lineOption);
    },

    initPicture3() {
      let arr = [];
      console.log(this.monthsData);
      this.departments.forEach((depart) => {
        let obj = {};
        let arrData = this.monthsData.map((item) => item[depart]);
        obj["data"] = arrData;
        obj["name"] = depart;
        obj["type"] = "bar";
        obj["stack"] = "add";
        arr.push(obj);

        console.log("arrData", arrData);
      });

      const chartDom = echarts.init(this.$refs.chartDom);

      this.picture3Option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.months,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],

        series: arr,
        // series: [
        //   {
        //     name: 'Direct',
        //     type: 'bar',
        //     emphasis: {
        //       focus: 'series'
        //     },
        //     data: [320, 332, 301, 334, 390, 330, 320]
        //   },
        //   {
        //     name: 'Email',
        //     type: 'bar',
        //     stack: 'Ad',
        //     emphasis: {
        //       focus: 'series'
        //     },
        //     data: [120, 132, 101, 134, 90, 230, 210]
        //   },
        //   {
        //     name: 'Union Ads',
        //     type: 'bar',
        //     stack: 'Ad',
        //     emphasis: {
        //       focus: 'series'
        //     },
        //     data: [220, 182, 191, 234, 290, 330, 310]
        //   },
        //   {
        //     name: 'Video Ads',
        //     type: 'bar',
        //     stack: 'Ad',
        //     emphasis: {
        //       focus: 'series'
        //     },
        //     data: [150, 232, 201, 154, 190, 330, 410]
        //   },
        //   {
        //     name: 'Search Engine',
        //     type: 'bar',
        //     data: [862, 1018, 964, 1026, 1679, 1600, 1570],
        //     emphasis: {
        //       focus: 'series'
        //     },
        //     markLine: {
        //       lineStyle: {
        //         type: 'dashed'
        //       },
        //       data: [[{ type: 'min' }, { type: 'max' }]]
        //     }
        //   },
        //   {
        //     name: 'Baidu',
        //     type: 'bar',
        //     barWidth: 5,
        //     stack: 'Search Engine',
        //     emphasis: {
        //       focus: 'series'
        //     },
        //     data: [620, 732, 701, 734, 1090, 1130, 1120]
        //   },
        //   {
        //     name: 'Google',
        //     type: 'bar',
        //     stack: 'Search Engine',
        //     emphasis: {
        //       focus: 'series'
        //     },
        //     data: [120, 132, 101, 134, 290, 230, 220]
        //   },
        //   {
        //     name: 'Bing',
        //     type: 'bar',
        //     stack: 'Search Engine',
        //     emphasis: {
        //       focus: 'series'
        //     },
        //     data: [60, 72, 71, 74, 190, 130, 110]
        //   },
        //   {
        //     name: 'Others',
        //     type: 'bar',
        //     stack: 'Search Engine',
        //     emphasis: {
        //       focus: 'series'
        //     },
        //     data: [62, 82, 91, 84, 109, 110, 120]
        //   }
        // ]
      };

      chartDom.setOption(this.picture3Option);
    },
  },
};
</script>
  

  <style scoped>
.upper-section {
  display: flex;
  justify-content: space-between;
}

.left-chart-container,
.right-chart-container {
  width: 48%;
  margin-right: 2%;
}

.lower-section {
  margin-top: 20px;
}
</style>